// 登录拦截 导航守卫控制 这个文件后期自己实现
import router, { asyncRoutes } from '@/router'
import store from '@/store'

const whiteList = ['/login', '/404']
// 进度条包nprogress
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
// 前置导航守卫
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  nprogress.start()
  // store.state.user.token
  // 如果有token
  if (store.getters.token) {
    // 有token还要去登录页面强制去首页
    if (to.path === '/login') {
      next('/')
      // 被强制拦截的页面 不会经过后置导航守卫的 手动done掉
      nprogress.done()
      // 有token想去哪就去哪
    } else {
      // 登录后存储了token  再获取个人信息 再进入首页
      // 在此处获取个人信息   todo ==== 后期会在此处处理权限业务
      if (!store.getters.name) { // 避免切换页面多次获取个人信息
        const { roles: { menus }} = await store.dispatch('user/getUserInfo')
        console.log(menus) // 当前用户的权限列表
        // 根据用户的权限列表 筛选出对应的权限路由 再将这个路由添加给路由规则
        console.log(asyncRoutes)
        // const filterRoutes = asyncRoutes.filter(item => menus.includes(item.children[0].name))
        const filterRoutes = asyncRoutes.filter(item => menus.includes(item.path.slice(1)))
        console.log(filterRoutes)
        store.commit('routes/setRoutes', filterRoutes)
        // addRoutes 为路由添加路由规则的方法
        router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])
        // addRoutes的规则是后来才加进来的 [3静态规则], 刷新页面的时候在没有addRoutes之前路由规则中是没有filterRoutes 所以就会白屏, 再执行一次next进入
        next(to.path)
      }
      next()
    }
    // 没有token
  } else {
    // 没有token可以访问白名单页面
    if (whiteList.includes(to.path)) {
      next()
      // 没有token还要访问非白名单页面 强制去登录页面
    } else {
      next('/login')
      // 被强制拦截的页面 不会经过后置导航守卫的 手动done掉
      nprogress.done()
    }
  }
})
// 被强制拦截的页面 不会经过后置导航守卫的
// 后置导航守卫
router.afterEach((to, from) => {
  // 关闭进度条
  nprogress.done()
})
